<template>
  <view class="listen">
    <view class="title" v-if="bookInfo">
      {{ bookInfo.bookEdition + bookInfo.bookYear }}-{{ bookInfo.shortName }}
    </view>
    <view class="title" v-if="articleInfo">
      {{ articleInfo.title }}-{{ articleInfo.topicTitle }}
    </view>
    <view class="box">
      <view class="content">
        <view class="content_container">
          <view class="content_box">
            <view
              class="content_scroll"
              :style="{
                top: -currentSentenceIndex * transitionHeight + 'rpx',
                left: 0,
              }"
            >
              <view
                class="content_detail"
                v-for="(item, index) in list"
                :key="index"
                :class="{
                  active: index === currentSentenceIndex,
                }"
                :style="{ height: transitionHeight + 'rpx' }"
                @click="playSingleAudio(item)"
              >
                <view class="content_item">
                  <view class="content_number">
                    {{ index + 1 }}
                  </view>
                  <view class="content_content">
                    <view class="content_text">
                      {{ item.sentence }}
                    </view>
                    <view class="content_text" v-show="isShowChinese">
                      {{ item.chinese }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="operation">
        <view
          class="operation_buton"
          :class="{ active: isPlaying }"
          @click="control()"
        >
          <template v-if="!isPlaying">
            <text>逐句播放</text>
            <view class="operation_icon">
              <u-icon name="play-right-fill" color="#fff" size="28"></u-icon>
            </view>
          </template>
          <template v-else>
            <text>暂停</text>
            <view class="operation_icon">
              <u-icon name="pause" color="#fff" size="28"></u-icon>
            </view>
          </template>
        </view>
        <view
          class="operation_buton"
          :class="{ active: isShowChinese }"
          @click="switchChange()"
        >
          <template v-if="!isShowChinese">
            <text>显示句意</text>
            <view class="operation_icon">
              <image
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/eye1.png"
                mode="widthFix"
                style="width: 36rpx"
              ></image>
            </view>
          </template>
          <template v-else>
            <text>隐藏中文</text>
            <view class="operation_icon">
              <image
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/eye2.png"
                mode="widthFix"
                style="width: 36rpx"
              ></image>
            </view>
          </template>
        </view>
        <view class="operation_buton">
          <view class="operation_buton_content" @click="startTraining()">
            AI陪练
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    bookInfo: {
      type: Object,
      default: null,
    },
    articleInfo: {
      type: Object,
      default: null,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    this.initAudio();
  },
  data() {
    return {
      currentSentenceIndex: 0,
      audio: null,
      sentenceAudio: null,
      isPlaying: false,
      isShowChinese: false,
      isSuspend: false,
      transitionHeight: 84,
    };
  },
  methods: {
    initAudio() {
      const audio = uni.createInnerAudioContext();
      audio.autoplay = true;
      audio.onEnded(() => {
        if (this.currentSentenceIndex === this.list.length - 1) {
          this.currentSentenceIndex = 0;
          this.suspend();
          return;
        }
        this.currentSentenceIndex++;
        this.playAudio();
      });
      audio.onError((res) => {
        console.log(res.errMsg);
        console.log(res.errCode);
      });
      this.audio = audio;
    },
    control() {
      if (!this.isPlaying) {
        this.isPlaying = true;
        this.playAudio();
      } else {
        this.suspend();
      }
    },
    suspend() {
      this.isPlaying = false;
      this.audio.pause();
    },
    playAudio() {
      this.audio.src = this.list[this.currentSentenceIndex].audio;
      this.audio.play();
    },
    playSingleAudio(item) {
      if (this.isPlaying) {
        this.suspend();
      }
      if (this.sentenceAudio) {
        this.sentenceAudio.pause();
      }
      let audio = uni.createInnerAudioContext();
      audio.src = item.audio;
      audio.play();
      this.sentenceAudio = audio;
    },
    startTraining() {
      if (this.isPlaying) {
        this.suspend();
      }
      this.$emit("view");
    },
    switchChange() {
      this.isShowChinese = !this.isShowChinese;
      this.transitionHeight = this.transitionHeight === 84 ? 112 : 84;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./Listen";
</style>
